// 1 导入相关包
import React from 'react'; // 创建react 元素的
import ReactDOM from 'react-dom/client'; //渲染 react 元素的
// 引入css
import './index.css';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 1. 创建一个 p 标签，包含“月薪过万”文本
// const p = React.createElement('p', null, '月薪过万')
// 2. 给 p 标签添加一个 id=123 的属性
// const p = React.createElement('p', {id: 123}, '月薪过万')
// 3. 给 p 标签添加一个 class 选择器，并将字体颜色设置为 red
const p = React.createElement('p', { id: 123, className: 'red' }, '月薪过万');
// 4. 创建一个 div 标签，包含上面创建的 p 标签
const div = React.createElement('div', null, p);

// 创建如下结构
/* 
<div>
    <h2>购物列表</h2>
    <ul>
        <li>华为</li>
        <li>iPhone</li>
    </ul>
</div>
*/
const reactElem = React.createElement(
  'div',
  null,
  React.createElement('h2', null, '购物列表'),
  React.createElement(
    'ul',
    null,
    React.createElement('li', null, '华为'),
    React.createElement('li', null, 'iPhone')
  )
);

// 创建一个非w3c规范的html标签，会直接渲染。控制台报警告，页面还可以正常渲染
// const hello = React.createElement('hello', null, 'hello');

console.log(div);

// 渲染
root.render(div);
